<template>
  <div class="contents">
    <el-row :gutter="10" type="flex">
      <el-col :span="4">
        <el-select v-model="optdata.warehouseId" clearable placeholder="请选择">
          <el-option
            v-for="(item,i) in opt1"
            :key="i"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <goods-type @selectType="changeType"></goods-type>
      </el-col>
      <!-- <el-col :span="4">
        <el-select v-model="categoryId" clearable placeholder="请选择">
          <el-option
            v-for="item in opt2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col> -->
      <el-col :span="6">
        <el-input v-model="optdata.code" placeholder="请输入商品名称/编码">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div style="position: absolute; top: 30px; right: 42px; z-index: 9999;">
      <!-- <el-button @click="editData">{{edits?'编辑':'保存'}}</el-button> -->
      <!-- neturl -->
      <a :href="neturl+'/warehouse/stockopening/export/modelexcel'"><el-button>下载模板</el-button></a>
      <div style="display: inline-block;margin-left: 10px;">
        <el-upload
          class="upload-demo"
          :on-error = "errorfunc"
          :show-file-list="false"
          :on-success = "successfunc"
          :action="neturl+'/warehouse/stockopening/import/excel'">
          <el-button slot="trigger" size="small" type="primary">导入</el-button>
        </el-upload>
      </div>



    </div>
    <el-table :data="table1.list" style="width: 100%; margin-top: 10px;">
      <el-table-column prop="goodsInfo.code" label="商品编码"></el-table-column>
      <el-table-column prop="goodsInfo.name" label="商品"></el-table-column>
      <el-table-column prop="goodsInfo.detail" label="描述"></el-table-column>
      <el-table-column prop="goodsInfo.unit" label="单位"></el-table-column>
      <el-table-column prop="qty" label="期初库存">
        <template slot-scope="scope">
          <el-input v-model="scope.row.qty" align='center' :disabled="scope.row.edits" style="width:78px"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="期初单价">
        <template slot-scope="scope">
          <el-input v-model="scope.row.price" :disabled="scope.row.edits" style="width:78px"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="期初金额">
        <template slot-scope="scope">
          {{scope.row.price * scope.row.qty}}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="操作">
        <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="editData(scope.row)" >{{scope.row.edits?'编辑':'保存'}}</el-link>
            <!-- <el-link :underline="false" type="primary" style="margin-left: 10px;" @click="delData(scope.row)" >删除</el-link> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-size="optdata.pagesize"
      :current-page="optdata.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      style="text-align: left;"
      :total="table1.total"
    />
  </div>
</template>

<script>
  import netconfig from '@/config/net.config.js'
  import { StockopeningList,Stockopeningedit,Stockopeningdel,getWarehouseQuery } from '@/api/warehouse'
  import goodsType from '@/components/goodsType.vue'
  export default {
    components: {
      goodsType,
    },
    data() {
      return {
        neturl:"", //请求地址
        opt1: [],
        cangk: '',
        opt2: [
          {
            value: '0',
            label: '全部',
          },
          {
            value: '1',
            label: '已录入期初库存商品',
          },
          {
            value: '2',
            label: '未录入期初库存商品',
          },
        ],
        // {
        // "stock_opening_status":"期初状态"
        // "warehouseId":"仓库id"
        // "categoryId":"商品分类id"
        // "code":"商品名称编码"
        // }
        categoryId:'',
        // current pagesize
        optdata:{
          warehouseId:'',
          categoryId:'',
          code:'',
          current:1,
          pagesize:10,
          ws_id: 1,
        },
        early: '',
        table1: [],
        // edits:true
      }
    },
    watch:{
      optdata:{
        handler(val,oldval){
          this.getList()
        },
        deep:true
      },
      categoryId(val,oldval){
        console.log('多选进来')
        if(val.length == 0){
          this.optdata.categoryId = ''
        }else{
          this.optdata=''
          this.optdata.categoryId = val
        }
        console.log(val)
      }
    },
    async created() {
      // 获取仓库
      let res = await getWarehouseQuery({})
      this.opt1 = res.data.list
      console.log(res.data.list)

      this.neturl  = netconfig.baseURL
      this.getList()
    },
    methods: {
      // async delData(val){
      //   console.log("删除",val);
      // },
      handleSizeChange(val) {
        this.optdata.pagesize = val
            },
            handleCurrentChange(val) {
              this.optdata.current = val
            },
      successfunc(){
        this.$message.success("上传成功")
        this.getList()
      },
      errorfunc(){
        this.$message.error("上传失败")
      },
      async getList() {
        const res = await StockopeningList(this.optdata)
        this.table1 = res.data
        console.log(res.data);
        this.table1.list = res.data.list.map((item)=>{
          return {
            ...item,
            edits:true
          }
        })
        // this.table1 = res.data
      },
      changeType(data) {
        console.log(data)
        if(data.length == 0){
          this.optdata.categoryId = ''
        }else{
          this.optdata.categoryId = data[1]
        }
      },
      async editData(val){
        if(!val.edits){
          let data={
            id:val.id,
            qty:val.qty,
            price:val.price,
            total: parseInt(val.price*val.qty)
          }
          let res = await Stockopeningedit(data)
          console.log(res);
          if(res.status == 200){
            this.$message.success("保存成功")
            this.getList()
          }else{
            this.$message.error("保存失败")
          }
          // alert("保存了")
        }
        // console.log(val);
        val.edits = !val.edits
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;
  }
</style>
